<!-- components/RegisterForm.vue 完整优化版 -->
<template>
  <el-form
    :model="registerForm"
    :rules="registerRules"
    ref="registerFormRef"
    @keyup.enter="handleRegister"
    class="auth-form"
  >
    <div class="form-header">
      <h1>创建账号</h1>
      <p>立即加入我们的社区</p>
    </div>

    <el-form-item prop="account">
      <el-input
        v-model="registerForm.account"
        placeholder="用户名"
        :prefix-icon="User"
        clearable
        autofocus
      />
    </el-form-item>
    <el-form-item prop="nickName">
      <el-input
        v-model="registerForm.nickName"
        placeholder="昵称"
        :prefix-icon="User"
        clearable
        autofocus
      />
    </el-form-item>

    <el-form-item prop="email">
      <el-input
        v-model="registerForm.email"
        placeholder="邮箱"
        :prefix-icon="Message"
        clearable
      />
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        v-model="registerForm.password"
        placeholder="密码"
        :prefix-icon="Lock"
        :type="showPassword ? 'text' : 'password'"
        clearable
      >
        <template #suffix>
          <el-icon @click="showPassword = !showPassword" class="cursor-pointer">
            <View v-if="showPassword" />
            <Hide v-else />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item prop="confirmPassword">
      <el-input
        v-model="registerForm.confirmPassword"
        placeholder="确认密码"
        :prefix-icon="Lock"
        type="password"
        clearable
      />
    </el-form-item>

    <el-button
      type="primary"
      :loading="loading"
      @click="handleRegister"
      class="submit-btn"
    >
      立即注册
    </el-button>

    <div class="form-footer">
      <span class="text-gray-500">已有账号？</span>
      <el-link type="primary" @click="$emit('switch-form')">去登录</el-link>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { User, Lock, Message, View, Hide } from "@element-plus/icons-vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { cloneDeep } from "lodash";
import { register } from "@/api/user-app";
import { encrypt } from "@/utils";
const emit = defineEmits(["switch-form"]);
interface RegisterForm {
  account: string;
  email: string;
  password: string;
  confirmPassword: string;
  nickName: string;
}

const registerForm = reactive<RegisterForm>({
  account: "dc494235908",
  email: "asd@qq.com",
  password: "Ducai494235908",
  confirmPassword: "Ducai494235908",
  nickName: "杜财",
});

const registerFormRef = ref<FormInstance>();
const showPassword = ref(false);
const loading = ref(false);

const validatePasswordConfirmation = (
  rule: any,
  value: string,
  callback: any
) => {
  if (value !== registerForm.password) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const registerRules = reactive<FormRules<RegisterForm>>({
  nickName: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    {
      min: 2,
      max: 6,
      message: "用户名长度需在2-6个字符之间",
      trigger: "blur",
    },
  ],
  account: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 16,
      message: "用户名长度需在3-16个字符之间",
      trigger: "blur",
    },
    {
      pattern: /^[a-zA-Z0-9_]+$/,
      message: "只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    {
      type: "email",
      message: "请输入有效的邮箱格式",
      trigger: ["blur", "change"],
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 8,
      max: 20,
      message: "密码长度需在8-20个字符之间",
      trigger: "blur",
    },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
      message: "需包含大小写字母和数字",
      trigger: "blur",
    },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    { validator: validatePasswordConfirmation, trigger: "blur" },
  ],
});

const handleRegister = async () => {
  try {
    loading.value = true;
    const valid = await registerFormRef.value?.validate();

    if (!valid) return;
    const form = cloneDeep(registerForm);
    delete form.confirmPassword;
    const p = encrypt(form.password);
    if (p) {
      form.password = p;
    } else {
      ElMessage.error("注册错误");
      return;
    }

    await register(form);
    ElMessage.success("注册成功");
    // 注册成功后自动跳转到登录
    emit("switch-form");
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 与登录表单共享样式 */

@keyframes form-enter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.password-strength {
  margin-top: -10px;
  font-size: 12px;
  color: #606266;

  &__bar {
    height: 4px;
    background: #ebeef5;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;

    div {
      height: 100%;
      transition: all 0.3s;
    }
  }
}
.auth-form {
  width: 380px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-header {
  text-align: center;
  margin-bottom: 40px;

  h1 {
    font-size: 24px;
    color: #303133;
    margin-bottom: 8px;
  }

  p {
    color: #909399;
    font-size: 14px;
  }
}

.submit-btn {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  letter-spacing: 2px;
}

.form-footer {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  padding: 0 15px;

  .el-input__inner {
    height: 44px;
  }
}
</style>
